<%@ page isELIgnored="false" %> 
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Show</title>

<style type="text/css">
*{
	margin: 0px;
	padding: 0px;
}
.full-width {
	width: 100%;
}
.align-center {
	text-align: center;
}
.float-left {
	float: left;
}
.float-right {
	float: right;
}
.inline-block {
	display: inline-block;
}
.margin-20 {
	margin: 20px;
}
.margin-top-10 {
	margin-top: 10px;
}
.clear-both {
	clear: both;
}
</style>
</head>
<body>
	<div class="margin-20">
		<div>
			<form id="upload" action="/UpLoadAndDownLoadServlet/service/upload_download/upload" enctype="multipart/form-data" method="post" class="float-left">
				<input type="file" name="file" id="file">
				<input type="button" onclick="ajaxSubmitForm()" value="上传">
			</form>
			<div class="float-right">
				<input type="text" id="search" class="inline-block">
				<input type="button" onclick="getData()" value="查询" class="inline-block">
			</div>
		</div>
		<div class="clear-both"></div>
		<table id="table-1" border="1" class="full-width align-center margin-top-10">
			<thead>
				<tr>
					<th>ID</th>
					<th>文件名</th>
					<th>大小</th>
					<th>类型</th>
					<th>创建日期</th>
					<th>下载次数</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody></tbody>
			<tfoot></tfoot>
		</table>
		<form id="download" action="/UpLoadAndDownLoadServlet/service/upload_download/download" method="post" hidden="hidden">
			<input type="text" id="UUIDfilename" name="UUIDfilename">
			<input type="text" id="filename" name="filename">
			<input type="button" onclick="ajaxSubmitForm()" value="下载">
		</form>
		<div class="margin-top-10">
			<div class="full-width" style="border: 1px solid #DDDDDD"></div>
			<p class="margin-top-10">&nbsp;&nbsp;文件上传支持 txt,mp4,jpg,java,class 格式.</p>
		</div>
	</div>

<script src="${pageContext.request.contextPath}/skin/default/js/jquery-1.8.3.min.js"></script>
<script src="${pageContext.request.contextPath}/skin/default/js/jquery.form.js"></script>
<script type="text/javascript">
getData();

//获取数据
function getData() {
	$.ajax({
		url: '/UpLoadAndDownLoadServlet/service/upload_download/show',
		type: "POST",
		data:{'search':$('#search').val(),'startrow':-1,'maxrow':-1},
		dataType:'json',
		async: true,
		error: function(request) {
	        alert("Connection error");
	    },
		success: function(data){
			//alert(JSON.stringify(data));
			initData(data);
		}
	});
}

//上传
function ajaxSubmitForm() {
    var value = $("#file").val();
    if (value==null || value=="") {
        alert("请先选择文件");
        return false;
    }
    if (!value.match(/.txt|.mp4|.java|.jpg|.jpeg|.gif|.png|.bmp/i)) {
        alert("文件格式错误");
        return false;
    }
    var option = {
        url : $('#form').attr("action"),
        type : 'POST',
        dataType : 'json',
        headers : {"ClientCallMode" : "ajax"}, //添加请求头部
        success : function(data) {
            alert(JSON.stringify(data));
            getData();
        },
        error: function(data) {
            alert(JSON.stringify(data) + "--上传失败,请检测文件是否符合要求后刷新后重试");
        }
     };
    $("#upload").ajaxSubmit(option);
    return false; //最好返回false，因为如果按钮类型是submit,则表单自己又会提交一次;返回false阻止表单再次提交
}

//下载
function download(id,UUIDfilename, filename) {
	$('#UUIDfilename').val(UUIDfilename);
	$('#filename').val(filename);
	$('#download').submit();
	$('#'+id).text(parseInt($('#'+id).text())+1);
}

//初始化数据
function initData(data) {
	var html = "";
	var filelist = data.filelist;
	for (var i = 0; i < filelist.length; i++) {
		var file = filelist[i];
		html += "<tr>"
		html += "<td>" + (i+1) + "</td>"
		html += "<td>" + getFileName(file.file_name) + "</td>"
		html += "<td>" + file.file_size + "</td>"
		html += "<td>" + file.file_type + "</td>"
		html += "<td>" + file.create_date + "</td>"
		html += "<td id='downloadTime"+file.id+"'>" + file.download_time + "</td>"
		html += "<td><button onclick=\"download('downloadTime"+file.id+"','"+file.file_uuid+"','"+file.file_name+"')\">下载</a></td>"
	}
	$('#table-1 tbody').html(html);
}

//根据键取得list中存在该key的map的value
function getMapValue(list,mapkey) {
	var val = '';
	for(var i = 0; i < list.length; i++) {
		var map = list[i];
		if (map.key==mapkey) {
			val = map.value;
			continue;
		}
	}
	return val;
}

//截取文件名
function getFileName(filename) {
	var index = filename.lastIndexOf(".");
	index = index==-1?filename.length():index;
	return filename.substring(0,index);
}
</script>

</body>
</html>